import React, { Component } from "react";
import Home from "./views/Home";
import Form from "./views/Form";
import Select from "./views/Select";
import Select2 from "./views/Select2";
import Menu from "./views/Menu";
import Shoppingcar from "./views/Shoppingcar";
import Sku from "./views/Sku";
import PTC from "./views/PTC";
import CTC from "./views/CTC";
import FilterableProductTable from "./views/FilterableProductTable";
import Bus from "./views/Bus";
import Context from "./views/Context";
import Life from "./views/Life";
import Event from "./views/Event";
import Slot from "./views/Slot";
import Page1 from "./views/Page1";
import Page2 from "./views/Page2";
import Page3 from "./views/Page3";
import Film from "./views/Film";
import NotFound from "./views/NotFound";
import RouterLink from "./views/RouterLink";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1,path:"/", msg: "首页", com: Home },
        { id: 2,path:"/form", msg: "表单", com: Form },
        { id: 3,path:"/select" ,msg: "下拉框", com: Select },
        { id: 4,path:"/select2", msg: "省市联动", com: Select2 },
        { id: 5,path:"/menu", msg: "菜单", com: Menu },
        { id: 6,path:"/shoppingcar", msg: "购物车", com: Shoppingcar },
        { id: 7, path:"/sku",msg: "多对多", com: Sku },
        { id: 8,path:"/ptc", msg: "父传子和子传父", com: PTC },
        {id:9,path:"/ctc",msg:"子传子",com:CTC},
        {id:10,path:"/producttable",msg:"商品搜索",com:FilterableProductTable},
        {id:11,path:"/bus",msg:"bus",com:Bus},
        {id:12,path:"/context",msg:"跨层级",com:Context},
        {id:13,path:"/life",msg:"生命周期",com:Life},
        {id:14,path:"/event",msg:"事件",com:Event},
        {id:15,path:"/slot",msg:"组合",com:Slot},
        {id:16,path:"/page1",msg:"分页组件",com:Page1},
        {id:17,path:"/page2",msg:"日历组件",com:Page2},
        {id:18,path:"/page3",msg:"行程组件",com:Page3},
        {id:19,path:"/film",msg:"电影",com:Film}
      ],
      com: Home,
      activeIndex:1,//默认第一个
    };
  }

  componentDidMount(){
    window.onhashchange = ()=>{
        let hash  = window.location.hash;
        let path = hash.substring(1);
       
        let info  =this.state.list.filter(item=>item.path === path);
        if(info.length){ //找到了
          let item  = info[0];//对象
           this.setState({
            com:item.com,
            activeIndex:item.id
           })

        }else{
          this.setState({
            com:NotFound
          })
        }


    }

  }

  // change = (item)=>{
  //   this.setState({
  //       com:item.com,
  //       activeIndex:item.id
  //   })
  // }
  render() {
    let RouterView = this.state.com;
    return (
      <div>
        <div className="tr">
          {this.state.list.map((item) => (
            <div className={item.id===this.state.activeIndex?"td active":"td"} key={item.id}>
             {/* //<a href={"#"+item.path}>{item.msg}</a>  */}
             <RouterLink to={"#"+item.path}>{item.msg}</RouterLink>
            </div>
          ))}
        </div>
        <RouterView></RouterView>
      </div>
    );
  }
}
